<template>
	<view class="box">
		<view v-if="state!=1&&state!=0">
			<view class="failed" style="color: red;" v-if="state==2">未通过审核，请确认信息重新提交</view>
			<view class="failed" style="color: red;" v-if="state==2">{{reasonForFailure}}</view>
			<view class="failed" v-if="state==0&&Idcard">正在审核，请耐心等待</view>
			<view class="identityInfo">
				<view class="Title">身份信息<text>(必填）</text></view>
				<view class="Layout">
					<view class="flex Info">
						<view><text class="red">*</text>姓名</view>
						<input class="input" type="text" maxlength="8" v-model="Name" placeholder="请输入您的真实姓名"
							placeholder-style="color: #bebdbd;" />
					</view>
					<view  class="flex Info">
						<view><text class="red">*</text>身份证号</view>
						<input class="input" type="text" maxlength="18" v-model="Idcard" placeholder="请输入您的身份证号"
							placeholder-style="color: #bebdbd;" />
					</view>
				</view>
			</view>

			<view class="IDCard">
				<view class="Title">身份证正反面</view>
				<view class="Layout">
					<view class="flex">
						<view class="upload">
							<view class="chonge" v-if="!isShow1">
								<view class="cancelImg" @click="cancelImg(1)">
									<uni-icons type="clear" size="25"></uni-icons>
								</view>
								<image :src="image1"></image>
							</view>
							<view class="chonge chongeser" @click="upload(1)" v-if="isShow1">
								<image class="chonup" :src="pic1" mode=""></image>
							</view>
						</view>
						<view class="upload">
							<view class="chonge" v-if="!isShow2">
								<view class="cancelImg" @click="cancelImg(2)">
									<uni-icons type="clear" size="25"></uni-icons>
								</view>
								<image :src="image2"></image>
							</view>
							<view class="chonge chongeser" @click="upload(2)" v-if="isShow2">
								<image class="chonup" :src="pic1" mode=""></image>
							</view>
						</view>
					</view>
					<view class="Example flex">
						<view class="Positive">
							<view class="shili">示例</view>
							<image src="../static/images/sfzz.png" mode=""></image>
						</view>
						<view class="back">
							<view class="shili">示例</view>
							<image src="../static/images/sfzf.png" mode=""></image>
						</view>
					</view>
				</view>
			</view>
			<view class="Reason">
				<view class="Title">为什么要实名认证？</view>
				<view class="Layout">
					<view class="content">
						<view class="">
							· 根据海关规定，购买跨境商品需要办理清关手续，请配合进行实
							名认证，以确保购买的商品顺利通过海关检查。
						</view>

					</view>
				</view>
			</view>
			<view class="confirm" @click="confirm()">
				确认提交
			</view>
		</view>
		<view v-if="state==1||state==0">
			<!-- <view class="failed" v-if="state==0&&Idcard">正在审核，请耐心等待</view> -->
			<view class="identityInfo">
				<view class="Title">身份信息</view>
				<view class="Layout">
					<view class="flex2 Info">
						<view><text class="red">*</text>姓名:</view>
						<view class="input">{{Name}}</view>
						
					</view>
					<view class="flex2 Info">
						<view><text class="red">*</text>身份证号:</view>
						<view class="input">{{Idcard}}</view>
					</view>
					
				</view>
			</view>
		
			<view class="IDCard">
				<view class="Title">身份证正反面</view>
				<view class="Layout">
					<view class="flex upload">
						<view class="chonge" >
							<image :src="image1" mode=""></image>
						</view>
						<view class="chonge" >
							<image :src="image2" mode=""></image>
						</view>
					</view>
				</view>
			</view>
		
			<view class="confirm2" v-if="state==0&&Idcard">
				正在审核，请耐心等待
			</view>
			<view class="confirm2" v-if="state==1">
				已成功认证
			</view>
		</view>
	</view>
</template>

<script>
	const requImg = require("@/common/api_sign/requImg.js")
	export default {

		data() {
			return {
				Name: "",
				Idcard: "",
				phone: "",
				address: "",
				image1: "",
				image12: "",
				image2: "",
				image22: "",
				imgInfo: "",
				index: 0,
				array: [],
				arrayNum: [],
				area_code: [],
				Info: "",
				state: "-1",
				isShow1:true,
				isShow2:true,
				pic1:"../static/images/chonge.png"
			}
		},
		onLoad() {
			this.getInfo(),
			this.GetInfo()
		},
		created() {
			//this.getCode();
		},
		methods: {
			GetInfo(){//获取用户信息
			let that = this;
				that.$util.request({
					url: '/mobile/index.php?act=member_index&op=getInfo',
					method: 'POST',
					data: {},
				}).then(function(res) {
					that.phone=res.datas.member_info.member_mobile;
					that.address=res.datas.member_info.member_areainfo
					console.log(that.address)
				})
			},
			getInfo() { //认证状态  
				let that = this;
				this.$util.request({
					url: '/mobile/index.php?act=member_index&op=member_auth',
					method: 'get',
					data: {},
				}).then(function(res) {
					console.log(res)
					if (res.error_code == 0) {
						that.state = res.datas.state
						res.datas.code.map(item => {
							that.array.push(item.area_name)
							that.arrayNum.push(item.code)
							that.area_code.push(item.area_code)
						})
						if (res.datas.member_auth_info) {
							that.Name = res.datas.member_auth_info.auth_name
							that.Idcard = res.datas.member_auth_info.auth_card
							// that.phone = res.datas.member_auth_info.mobile.substring(res.datas.member_auth_info
							// 	.mobile.length - 11, res.datas.member_auth_info.mobile.length)
							// that.address = res.datas.member_auth_info.auth_address

							that.image1 = res.datas.member_auth_info.id_card_img_path
							that.image12 = res.datas.member_auth_info.id_card_img
							that.image2 = res.datas.member_auth_info.auth_fm_imgurl_path
							that.image22 = res.datas.member_auth_info.auth_fm_imgurl
						}
					} else {
						uni.showToast({
							title: res.message,
							icon: "none"
						})
					}

				})
			},
			//下拉框
			bindPickerChange: function(e) { //改变的事件名
				let that = this;
				console.log('picker发送选择改变，携带值为', e.target.value) //用于输出改变索引值
				this.index = e.target.value //将数组改变索引赋给定义的index变量
				this.jg = this.array[this.index] //将array【改变索引】的值赋给定义的jg变量
			},
			confirm() {
				if (this.state == 1) {
					uni.showToast({
						title: "您已经认证过了",
						icon: "none"
					})
					return false
				}
				let idcardReg =
					/^[1-9]\d{7}((0\d)|(1[0-2]))(([0|1|2]\d)|3[0-1])\d{3}$|^[1-9]\d{5}[1-9]\d{3}((0\d)|(1[0-2]))(([0|1|2]\d)|3[0-1])\d{3}([0-9]|X)$/;
				let that = this;
				if (that.Name && that.Idcard && that.image1 && that.image2) {
					if (idcardReg.test(that.Idcard)) {
						this.$util.request({ //提交
							url: '/mobile/index.php?act=member_index&op=member_auth',
							method: 'post',
							data: {
								code: that.area_code[that.index],
								auth_name: that.Name,
								mobile: that.phone,
								auth_card: that.Idcard,
								id_card_img: that.image12,
								auth_fm_imgurl: that.image22,
								auth_address: that.address,
							},
						}).then(function(res) {
							if (res.error_code == 0) {
								uni.showToast({
									title: "认证成功",
									icon: "none",
									success() {
										setTimeout(() => {
											uni.switchTab({
												url: "/main/member/index"
											})
										}, 1000)
									}
								});
							} else {
								uni.showToast({
									title: res.message,
									icon: "none",
								});
							}
						})
					} else {
						uni.showToast({
							title: "身份证格式错误",
							icon: "none",
						});
					}
				} else {
					uni.showToast({
						title: "必须信息不能为空",
						icon: "none"
					})
				}




			},
			cancelImg(index) { //删除图片
				if(index==1){
					this.image1=''
					this.isShow1=true
				}else{
					this.image2=''
					this.isShow2=true
				}
			},
			upload(index) { //图片选择
				let that = this;
				if (this.state == 1) {
					uni.showToast({
						title: "您已经认证过了",
						icon: "none"
					})
					return false
				}


				uni.chooseImage({
					count: 1,
					sizeType: ['compressed'], //可以指定是原图还是压缩图，默认二者都有
					sourceType: ['album'], //从相册选择
					success: function(res) {
						const tempFilePaths = res.tempFilePaths;
						let data = requImg.request("index.php?act=upload&op=uploadFile&buss_type=" + that
							.$uploadType.uploadtype009);
						var uper = uni.uploadFile({
							url: that.$apiurl + 'index.php?act=upload&op=uploadFile',
							filePath: tempFilePaths[0],
							name: 'file',
							formData: {
								key: data.key,
								buss_type: data.buss_type,
								api_sign: data.api_sign,
								comefrom: data.comefrom,
								api_time: data.api_time,
								// api_member_id:data.api_member_id,
								// api_member_name:data.api_member_name,
							},
							success(res1) {
								that.imgInfo = res1.data
								that.imgInfo = JSON.parse(that.imgInfo)
								if (that.imgInfo.error_code == 0) {
									if (index == 1) {
										that.isShow1=false
										that.image1 = that.imgInfo.datas.file_url;
										that.image12 = that.imgInfo.datas.file_name;
									} else if (index == 2) {
										that.isShow2=false
										that.image2 = that.imgInfo.datas.file_url;
										that.image22 = that.imgInfo.datas.file_name;
									}
								} else {
									uni.showToast({
										title: that.imgInfo.message,
										icon: "none"
									})
								}

							},
						})

					}
				});
			},

		},

	}
</script>

<style lang="scss">
	.box{
		background-color: #FFFFFF;
		height: 100%;
	}
	.upload {
		display: flex;
		margin-top: 30rpx;
		border-bottom: 1px solid #f5f5f5;
		background-color: #fff;
		position: relative;
	
		.chonge {
			width: 330rpx;
			height: 260rpx;
			border-radius: 10rpx;
			display: flex;
			align-items: center;
			justify-content: center;
			margin-bottom: 30rpx;
			position: relative;
	
			.cancelImg {
				position: absolute;
				right: -20rpx;
				top: -40rpx;
				z-index: 9;
			}
	
			.chonup {
				width: 100rpx;
				height: 100rpx;
			}
	
			image {
				width: 100%;
				height: 100%;
			}
		}
	
		.chongeser {
			border: 2rpx solid #65CDFB;
		}
	
	}
	.upload{
		border-radius: 0px !important;
	}
	.bottsjxIco {
		width: 30rpx;
		height: 50rpx;
		vertical-align: middle;
		margin-left: 15rpx;
	}

	.uni-form-item {
		padding: 0;
		color: #333333;
	}
	
	page {
		background-color: #FFFFFF;
	}

	.Layout {
		margin: 0 20rpx;
		box-sizing: border-box;
	}

	.Title {
		font-size: 30rpx;
		color: #ff4300;
		background-color: #f2efef;
		padding: 5rpx 20rpx;
		font-weight: bolder;
	}

	.down_box {
		width: 530rpx;
		margin-top: 10rpx;
		font-weight: 500;
	}

	.Title text {
		font-size: 24rpx;
		color: #7f7c7c;
		margin-left: 20rpx;
		font-weight: 500;
	}

	.flex {
		display: flex;
		justify-content: space-between;
		align-items: center;
	}
	.flex2{
		display: flex;
		align-items: center;
	}
	.red {
		color: #ff4300;
		margin-right: 10rpx;
	}

	.Info {
		border-bottom: 1rpx solid #EEEEEE;
		line-height: 80rpx;
		color: #333333;
		font-weight: bolder;
		margin-top: 20rpx;
	}

	.Info .input {
		width: 530rpx;
		margin-top: 10rpx;
		font-weight: 500;
	}

	.IDCard {
		margin-top: 20rpx;
	}


	.Example .shili {
		text-align: center;
		margin-top: 30rpx;
		font-weight: bolder;
		color: #555555;
	}

	.Example image {
		width: 245rpx;
		height: 158rpx;
		margin: 30rpx;
	}

	.Reason .content {
		margin-top: 20rpx;
		font-size: 24rpx;
		color: #555555;
	}

	.confirm {
		font-weight: bold;
		text-align: center;
		background-color: #ff4300;
		width: 50%;
		margin: 30rpx auto;
		line-height: 80rpx;
		color: #FFFFFF;
		border-radius: 25rpx;
	}
	.confirm2 {
		font-weight: bold;
		text-align: center;
		margin: 30rpx;
		line-height: 80rpx;
		color: #FFFFFF;
		background-color: #666666;
	}
</style>
